import React, {useEffect, useState} from "react";
import {Row, Col, Select, DatePicker, Radio} from "antd";
import moment from "moment";

const {RangePicker} = DatePicker

function Head({
	              onDatePickerChange,
	              channelList,
	              onChannelChange,
	              times,
	              avgCount
              }) {
	const inputWidth = '220px'
	const [value, setValue] = useState('')
	const [ranking, setRanking] = useState([])
	const now = moment()

	const timeRadioChange = (event) => {
		let end;
		setValue(event.target.value)
		end = moment().subtract(1, event.target.value)
		onDatePickerChange([end, now])
		/*switch (event.target.value) {
		  case 'day':

			break;
		  case 'week':
			break;
		  case 'month':
			break;
		  default:
			break;
		}*/

	}

	useEffect(() => {
		setRanking()
	}, [])


	return (
		<>
			<Row type={'flex'} align={'middle'}>
				<Col>
					平均异常个数: <span style={{fontSize: '20px', color: 'red'}}>{avgCount}</span>
				</Col>
				<Col offset={2}>
					<Radio.Group buttonStyle="solid" value={value}>
						<Radio.Button value="day" onChange={timeRadioChange}>今日</Radio.Button>
						<Radio.Button value="week" onChange={timeRadioChange}>本周</Radio.Button>
						<Radio.Button value="month" onChange={timeRadioChange}>本月</Radio.Button>
					</Radio.Group>
				</Col>
				<Col offset={2}>
					<RangePicker
						style={{width: inputWidth}}
						onChange={(moments, values) => {
							setValue('')
							return onDatePickerChange(moments)
						}}
						defaultValue={times}
						defaultPickerValue={times}
						allowClear={false}
					/>
				</Col>
			</Row>
		</>
	)
}

export default Head
